<template>
	<view class="content">
		<view class="tops">
			<view class="inpbox">
				<image src="/static/soshuo.png" mode=""></image>
				<input type="text" placeholder="纯天然水果" />
			</view>
		</view>
		<scroll-view scroll-y="true">
			<!-- 头部轮播图 -->
			<view>
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="/static/index-top-1.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="/static/index-top-2.png" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 导航图标 -->
			<view class="Navigationicon">
				<view class="NGbox" v-for="itme in categories" >
					<image :src="itme.url" mode="" :style="itme.color"></image>
					<text>{{itme.name}}</text>
				</view>

			</view>
			<!-- 最新上架 -->
			<view class="NewesHits">
				<view class="NHimg">
					<image src="/static/NewestHits-1.png" mode=""></image>
				</view>
				<view class="NHdetail">
					<view class="detailbox" v-for="itme in neweshits">
						<image :src="itme.url" mode=""></image>
						<view class="detailbox-name">{{itme.name}}</view>
						<view class="detailbox-description">{{itme.description}}</view>
						<view class="detailbox-Price">
						<text class="">￥</text>{{itme.Price}}
						</view>
					</view>
				</view>

			</view>
			<!-- 热卖商品 -->


		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	//渲染导航图标
	interface Category {
		name : string;
		icon : string;
		color : string;
		url : string;
	};

	interface NewesHits {
		name : string;
		Price : string;
		description : string;
		url : string;
	};
	let categories : Category[] = [
		{ name: '推荐', icon: 'star-filled', color: 'background-color:#FF5722', url: '/static/icon/recommend.png' },
		{ name: '水果类', icon: 'leaf', color: 'background-color:#4CAF50', url: '/static/icon/Fruits.png' },
		{ name: '蔬菜类', icon: 'leaf', color: 'background-color:#8BC34A', url: '/static/icon/Vegetables.png' },
		{ name: '干果类', icon: 'apple', color: 'background-color:#FFC107', url: '/static/icon/DriedFruits.png' },
		{ name: '粮油类', icon: 'cart', color: 'background-color:#F8E71C', url: '/static/icon/GrainsAndOils.png' }
	];
	let neweshits:NewesHits[]=[
		{name:'葡萄',Price:'12.00',description:'纯天然种植 | 自然生长',url:'/static/grape.png'},
		{name:'苹果',Price:'18.00',description:'纯天然种植 | 自然生长',url:'/static/apple.png'},
		{name:'橙子',Price:'3.56',description:'纯天然种植 | 自然生长',url:'/static/orange.png'},
		{name:'梨子',Price:'2.00',description:'纯天然种植 | 自然生长',url:'/static/pear.png'}
	]
</script>


<style scoped>
	.content {
		width: 750rpx;
		height: 100vh;
		background-color: #fffbf6;
	}

	.lj {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

	}

	/* 头部输入框 */
	.tops {
		width: 750rpx;
		height: 100rpx;
		background-color: #91f15c;
		position: fixed;
		bottom: 10;
		left: 0;
		z-index: 1;
		/* 153, 204, 51 */
	}

	.inpbox {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center
	}

	.inpbox image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 20rpx 0 0 20rpx;
		background-color: antiquewhite;
		border-right: 1px solid #000;
	}

	.inpbox input {
		width: 550rpx;
		height: 50rpx;
		border-radius: 0 20rpx 20rpx 0;
		background-color: antiquewhite;
	}

	/* 头部轮播图 */
	swiper {
		width: 750rpx;
		height: 300rpx;
		margin: 100rpx 0 0 0;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	/* 导航图标 */
	.Navigationicon {
		/* height: 150rpx; */
		/* background-color: aquamarine; */
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.NGbox {
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.NGbox image {
		/* background-color: aliceblue; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.NGbox text {
		font-size: 26rpx;
	}

	/* 最新上架 */
	.NewesHits {
		width: 750rpx;

	}

	.NHimg {
		width: 70%;
		height: 50rpx;
		margin: auto;

	}

	.NHimg image {
		width: 100%;
		height: 100%
	}

	.NHdetail {
		width: 700rpx;
		height: 700rpx;
		margin: auto;
		/* background-color: aqua; */
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
		flex-flow: row wrap;
	}

	.detailbox {
		width: 320rpx;
		height: 320rpx;
		background-color:#dde6cc;
		border-radius: 20rpx;
		
	}
	.detailbox image{
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx 20rpx 0 0;
	}
	.detailbox-name{
		font-size:15px;
		font-weight: bold;
		margin-left: 10rpx;
	}
	.detailbox-description{
		font-size:10px;
		color: #767676;
		margin-left: 10rpx;
	}
	.detailbox-Price{
		font-size:15px;
		font-weight: bold;
		color: red;
		margin-left: 10rpx;
	}
	.detailbox-Price text{
	/* 热卖商品 */
		font-size:10px;
	}
</style>